<template>
    <el-card shadow="always">
        {{studentSearch}}
        <!--条件查询表单-->
        <el-form :inline="true" :model="studentSearch" class="demo-form-inline" align="left">
            <el-form-item >
                <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
            </el-form-item>
            <el-form-item >
                <el-select v-model="studentSearch.cid" placeholder="所在班级">
                    <el-option label="所有班级" value="0"></el-option>
                    <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" plain size="medium">查询</el-button>
            </el-form-item>
        </el-form>
        <!--1. 表格数据的展示-->
        <el-table
                :data="students"
                style="width: 100%">
            <el-table-column
                    label="学号"
                    prop="sid"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    align="center"
                    prop="sname">
            </el-table-column>
            <el-table-column
                    label="性别"
                    align="center"
                    prop="sex">
            </el-table-column>
            <el-table-column
                    label="年龄"
                    align="center"
                    prop="age">
            </el-table-column>
            <el-table-column
                    label="住址"
                    align="center"
                    prop="addr">
            </el-table-column>
            <el-table-column
                    label="所在班级"
                    align="center"
                    prop="cname">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--2. 分页导航-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-card>


</template>

<script>
    export default {
        data() {
            return {
                students: [],
                page:1,
                pageSize:5,
                total:100,
                studentSearch:{},
                classes:[],
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 当每页大小改变时触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                // this.findByPage()
                this.search()
            },
            // 当当前页改变时触发
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                // this.findByPage()
                this.search()
            },
            //1. 查询所有学生
            findStudents() {
                this.$axios.get("/student?cmd=list").then(({data}) => {
                    this.students = data
                })
            },
            //2. 分页查询学生
            findByPage(){
                this.$axios.get(`/student?cmd=findByPage&page=${this.page}&pageSize=${this.pageSize}`).then(({data})=>{
                    this.total = data.total
                    this.students = data.rows
                })
            },
            //3. 查询班级
            findClasses() {
                this.$axios.get("/classes").then(({data}) => {
                    this.classes = data
                })
            },
            //4. 开始条件查询带分页
            search(){
                this.$axios.post(`/student?cmd=search&page=${this.page}&pageSize=${this.pageSize}`,"stud="+JSON.stringify(this.studentSearch)).then(({data})=>{
                    this.total = data.total
                    this.students = data.rows
                })
            }
        },
        created() {
            //1. 查询所有学生
            // this.findStudents()
            //2. 分页查询学生信息
            this.findByPage()
            //3. 查询所有班级
            this.findClasses()
        }
    }
</script>

<style>
    .el-pagination{
        text-align: right;
        margin-top: 20px;
    }
</style>